<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed ? 'logo-collapse-width' : 'logo-width'">
				{{ collapsed ? '' : sysName }}
			</el-col>
			<!--<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>-->
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{ sysUserName }}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item @click.native="settings">设置</el-dropdown-item>
						<el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed ? 'menu-collapsed' : 'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose"
					@select="handleselect" unique-opened router v-show="!collapsed">
					<template v-for="(item, index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index + ''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{ item.name }}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
								v-if="!child.hidden">{{ child.name }}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path"><i
								:class="item.iconCls"></i>{{ item.children[0].name }}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item, index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index, true)"
								@mouseout="showMenu(index, false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-' + index" @mouseover="showMenu(index, true)"
								@mouseout="showMenu(index, false)">
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path"
									class="el-menu-item" style="padding-left: 40px;"
									:class="$route.path == child.path ? 'is-active' : ''" @click="$router.push(child.path)">
									{{ child.name }}</li>
							</ul>
						</template>
						<template v-else>
					<li class="el-submenu">
						<div class="el-submenu__title el-menu-item"
							style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;"
							:class="$route.path == item.children[0].path ? 'is-active' : ''"
							@click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
					</li>
					</template>
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{ $route.name }}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>


		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>选择home栏颜色</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sumit">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
			<span>修改密码</span>

			<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="sumitpwd">确 定</el-button>
			</span>
		</el-dialog>
	</el-row>
</template>

<script>
import style from '@/styles/vars.scss'
import { settings } from 'nprogress';

export default {
	data() {
		return {
			sysName: '博客后台管理系统',
			collapsed: false,
			sysUserName: 'Neuronet',
			sysUserAvatar: 'https://img0.baidu.com/it/u=342808525,3109725284&fm=253&fmt=auto&app=138&f=JPEG?w=426&h=398',
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			showPassword:{
				password:""
			},
			input:"",
			dialogVisible: false,
			dialogVisible1: false,
			options: [{
				value: '1',
				label: '红色'
			}, {
				value: '2',
				label: '蓝色'
			}, {
				value: '3',
				label: '黄色'
			}, {
				value: '4',
				label: '黑色'
			}, {
				value: '5',
				label: '绿色'
			}],
			value: '',
			
		}
	},
	methods: {
		sumitpwd() {
			this.showPassword.password=this.input
			this.$http.put("/employee/change",this.showPassword).then(res=>{
				console.log(res.data);
				this.$message("修改成功")
				this.dialogVisible1=false
			}).catch(res=>{
				this.$message.error("修改失败")
			})
		},
		changePwd(){
			this.dialogVisible1=true;
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => { });
		},
		settings() {
			this.dialogVisible = true
		},

		onSubmit() {
			console.log('submit!');
		},
		handleopen() {
			//console.log('handleopen');
		},
		handleclose() {
			//console.log('handleclose');
		},
		handleselect: function (a, b) {
		},
		//退出登录
		logout: function () {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				localStorage.removeItem('token');
				localStorage.removeItem('permissions');
				localStorage.removeItem('menus');
				localStorage.removeItem('Logininfo');
				_this.$router.push('/login');
			}).catch(() => {

			});
		},
		//折叠导航栏
		collapse: function () {
			this.collapsed = !this.collapsed;
		},
		showMenu(i, status) {
			this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
		}
	},
	mounted() {
		this.sysUserName = '欢迎您：' + JSON.parse(localStorage.getItem("logininfo")).username;
		// this.sysUserAvatar = localStorage.getItem("userPic");
	}
}

</script>

<style scoped lang="scss">
@import '~scss_vars';

.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;

	.header {
		height: 60px;
		line-height: 60px;
		background: $color-primary;
		color: #fff;

		.userinfo {
			text-align: right;
			padding-right: 35px;
			float: right;

			.userinfo-inner {
				cursor: pointer;
				color: #fff;

				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 10px 0px 10px 10px;
					float: right;
				}
			}
		}

		.logo {
			//width:230px;
			height: 60px;
			font-size: 22px;
			padding-left: 20px;
			padding-right: 20px;
			border-color: rgba(238, 241, 146, 0.3);
			border-right-width: 1px;
			border-right-style: solid;

			img {
				width: 40px;
				float: left;
				margin: 10px 10px 10px 18px;
			}

			.txt {
				color: #fff;
			}
		}

		.logo-width {
			width: 230px;
		}

		.logo-collapse-width {
			width: 60px
		}

		.tools {
			padding: 0px 23px;
			width: 14px;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
		}
	}

	.main {
		display: flex;
		// background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;

		aside {
			flex: 0 0 230px;
			width: 230px;

			// position: absolute;
			// top: 0px;
			// bottom: 0px;
			.el-menu {
				height: 100%;
			}

			.collapsed {
				width: 60px;

				.item {
					position: relative;
				}

				.submenu {
					position: absolute;
					top: 0px;
					left: 60px;
					z-index: 99999;
					height: auto;
					display: none;
				}

			}
		}

		.menu-collapsed {
			flex: 0 0 60px;
			width: 60px;
		}

		.menu-expanded {
			flex: 0 0 230px;
			width: 230px;
		}

		.content-container {
			// background: #f1f2f7;
			flex: 1;
			// position: absolute;
			// right: 0px;
			// top: 0px;
			// bottom: 0px;
			// left: 230px;
			overflow-y: scroll;
			padding: 20px;

			.breadcrumb-container {

				//margin-bottom: 15px;
				.title {
					width: 200px;
					float: left;
					color: #475669;
				}

				.breadcrumb-inner {
					float: right;
				}
			}

			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
}</style>
